/**
 * Created by xiao++ on 7/13/16.
 */
import React from 'react';
import UploadFileStore from '../stores/UploadFileStore'
import UploadFileActions from '../actions/UploadFileActions';

class UploadFile extends React.Component {
    constructor(props) {
        super(props);
        this.state = UploadFileStore.getState();
        this.onChange = this.onChange.bind(this);
    }

    componentDidMount() {
        UploadFileStore.listen(this.onChange);
    }

    componentWillUnmount() {
        UploadFileStore.unlisten(this.onChange);
    }

    onChange(state) {
        this.setState(state);
    }

    handleSubmit(event){
        event.preventDefault();
        var pic = this.state.pic;
        var file = this.state.file;
        var age = this.state.age;
        var sex = this.state.sex;
        if(pic){
            console.info('pic',pic);
            console.info('file',file);
            console.info('age',age);
            console.info('sex',sex);
            UploadFileActions.addForm(pic, file, age, sex);
        }else{
            console.info('信息填写不完整');
        }
    }



    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <label htmlFor="">名称：</label>
                        <input type="text" ref="pic" value={this.state.pic} onChange={UploadFileActions.updatePic}/><br/>
                    <label htmlFor="">文件：</label>
                        <input type="file" accept="image/gif, image/jpeg" ref="picUrl" value={this.state.file} onChange={UploadFileActions.updateFile}/><br/>
                    <label htmlFor="">年龄：</label>
                        <select name="" id="" ref="age" value={this.state.value} onChange={UploadFileActions.updateAge}>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select><br/>
                    <label htmlFor="">性别：</label>
                        <input type="radio" name="sex" value="man" id="Man"  onChange={UploadFileActions.updateSex}/>男
                        <input type="radio" name="sex" value="woman" id="Woman"  onChange={UploadFileActions.updateSex}/>女<br/>
                    <button type="submit">提交</button>
                </form>
            </div>
        );
    }
}

export default UploadFile;